<template>
  <div class="shape" @mousedown.stop="handledown" :style="style">
    <div :class="['zb', selectedComponent.id == element.id ? 'selected' : '']">
      x:{{ element.x }},y:{{ element.y }},r:{{ element.angle }}
    </div>
    <img :src="QAimg" class="QAimg" v-if="element?.qaStamp" :style="qaStyle" />
    <div
      v-show="selectedComponent.id == element.id"
      class="selected-line"
    ></div>
  </div>
</template>
<script setup>
import editStore from "@/store/editStore.js";
import { computed, ref } from "vue";
import QAimg from "@/assets/images/edit/QA.png";
import { getAssetsFile } from "@/utils/index.js";

const props = defineProps({
  element: {
    type: Object,
    default: () => {},
  },
  type: {
    type: String,
    require: true,
  },
});

const store = editStore();

let style = computed(() => {
  let element = props.element ?? {};
  let reelBlock = store.getReelBlockSize;
  let correctX = props.type == "reel" ? reelBlock.width / 2 : 0;
  let correctY = props.type == "reel" ? reelBlock.height / 2 : 0;
  return {
    width: element.length + "px",
    height: element.width + "px",
    left: element.x + correctX + "px",
    top: element.y + correctY + "px",
    zIndex: element.zIndex,
    // transformOrigin: "center",
    transform: `rotate(${element.angle}deg)`,
    background: `url(${element.picName})`,
    backgroundSize: "cover",
  };
});

let selectedComponent = computed(() => {
  return store.selectedComponent || {};
});

let qaStyle = computed(() => {
  let element = props.element;
  if (element?.qaStamp) {
    return {
      width: (element.qaSize || 12) + "px",
      height: (element.qaSize || 12) + "px",
      left: element.qaStampX + "px",
      top: element.qaStampY + "px",
      transform: `rotate(${element.qaStampAngle}deg)`,
    };
  } else {
    return {};
  }
});

let startPoint = {
  x: 0,
  y: 0,
  l: 0,
  t: 0,
};
function handledown(e) {
  let { screenX, screenY } = e;
  startPoint.x = screenX;
  startPoint.y = screenY;
  startPoint.l = e.target.offsetLeft;
  startPoint.t = e.target.offsetTop;
  store.changeDrag(true);
  store.changeSelectedComponent(props.element);
  document.addEventListener("mousemove", move);
  document.addEventListener("mouseup", removeListen);
}
function move(e) {
  if (selectedComponent.value.lock) return;
  if (props.type != "innerBox") {
    e.target.onmouseout = removeListen;
  }
  let { screenX, screenY } = e;
  let scale =
    props.type == "reel" ? store.reelConfig.scale : store.packageConfig.scale;
  let x = (screenX - startPoint.x) / (scale / 100);
  let y = (screenY - startPoint.y) / (scale / 100);
  let reelBlock = store.getReelBlockSize;
  let correctX = props.type == "reel" ? reelBlock.width / 2 : 0;
  let correctY = props.type == "reel" ? reelBlock.height / 2 : 0;
  let cx = startPoint.l + x;
  let cy = startPoint.t + y;
  if (props.type != "innerBox") {
    if (cx <= 0) {
      cx = 0;
    } else if (cx >= e.target.offsetWidth - props.element.length) {
      cx = e.target.offsetWidth - props.element.length;
    }
    if (cy <= 0) {
      cy = 0;
    } else if (cy >= e.target.offsetHeight - props.element.width) {
      cy = e.target.offsetHeight - props.element.width;
    }
  }

  selectedComponent.value.x = +(cx - correctX).toFixed(2);
  selectedComponent.value.y = +(cy - correctY).toFixed(2);
}

function removeListen(e) {
  store.changeDrag(false);
  document.removeEventListener("mousemove", move);
}
</script>
<style scoped lang="scss">
.shape {
  position: absolute;
  .zb {
    position: absolute;
    top: -16px;
    font-size: 12px;
    color: #000;
  }
  .selected {
    color: #f00;
    // font-size: 14px;
  }
  .selected-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #15f47d;
    box-shadow: 0 0 1px 1px #15f47d;
    pointer-events: none;
  }
  .QAimg {
    position: absolute;
    //width: 20px;
    //height: 20px;
  }
}
</style>
